<%@ page import="com.ant.myagile.backlog.Sprint"%>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="template">
<r:require modules="Bootstrap, jquery-ui, MyAgileUI, HolderJS" />
 <link rel="stylesheet" href="${resource(dir: 'css', file: 'tructc.css')}">
<title>Sprint backlogs</title>
</head>
<body>
	<section id="page-container" class="container">
		<div class="span9 offset1">
			<g:if test="${projects }">
				<div id="option-wrapper">
					<p>
						<select id="project-select" class="input-block-level">
							<g:each status="pindex" in="${projects }" var="project">
								<option value="${project.id }">
									${project.projectName }
								</option>
							</g:each>
						</select>
					</p>
					<p>
						<select id="team-select" class="input-block-level">
							<option value='-1'>No Team Assigned</option>
						</select>
					</p>
					<p>
						<select id="sprint-select" class="input-block-level">
							<option value='-1'>No Sprint</option>
						</select>
					</p>
				</div>
				<div class="backlogsWrapper row">
					<section id="productBacklogsWrapper" class="panel span4">
						<p class="lead">Product Backlogs</p>
<%--						<p><button class="btn btn-primary input-block-level"><i class="icon-plus icon-white"></i> Add New User Story</button></p>--%>
						<ul id="productBacklogs" class="unstyled">
							<li id="productBacklogMessage" class="alert alert-error">No Project Selected.</li>
						</ul>
					</section>
					<section class="panel span4 pull-right">
						<p class="lead">Sprint Backlogs</p>
						<ul id="sprintBacklogs" class="unstyled">
							<li id="sprintBacklogMessage" class="alert alert-error">No
								Sprint Selected.</li>
						</ul>
					</section>
				</div>
			</g:if>
			<g:else>
				<div class="alert alert-error">
					There is no project exists in the database. Click <g:link action="create" controller="project">here</g:link> to add your project.
				</div>
			</g:else>
		</div>

	</section>
	<script type="text/javascript">
		jQuery(document).ready(function( $ ) {

			ajaxGetTeamByProject($("#project-select").val());
			ajaxGetUserStoryByProject($("#project-select").val());
			
			function ajaxGetTeamByProject(pid) {
				$("#team-select").empty();
				$.get('${createLink(action : 'jsonFindTeamByProject', controller : 'team')}',{projectID : pid},function(data) {
					if(data.teams) {
						$.each(data.teams, function(index, team) {
							$("#team-select").append("<option value='"+team.id+"'>"+team.teamName+"</option>");
						});
						ajaxGetSprintByTeam($("#team-select").val())
					} else {
						$("#team-select").html("<option value='-1'>No Team Assigned</option>");
					}
				});
			}

			function ajaxGetUserStoryByProject(pid) {
				$("#productBacklogs").empty(); // Remove all existed user stories
				$.get('${createLink(action : 'jsonFindUserStoryByProject', controller : 'userStory')}',{projectID : pid},function(data) {
					if(data.userStories)
					{
						$.each(data.userStories, function(index, userStory) {
							$("#productBacklogs").append("<li data-userstory='"+userStory.id+"' class='userstory userstory-medium text-left'><div class='userstory-header'><strong>"+userStory.name+"</strong></div><div class='userstory-inner'>"+userStory.description+"</div><div class='userstory-footer'><div class='pull-left'>V: 30 | Ri: 40 | R: D5T2</div><div class='pull-right'><a href='#' title='Edit' class='icon-pencil'></a> <a href='#' title='Remove' class='icon-remove'></a> <a href='#' title='Add Issue' class='icon-plus'></a></div></div></li>");
						});
					} else {
						$("#productBacklogs").html("<li id='productBacklogMessage' class='alert alert-error'>No backlogs.</li>");
					}
					setupDraggable(); // (Re)Setup Draggable
					
				});
			}

			function ajaxGetSprintByTeam(teamID) {
				resetProductBacklogStyle();
				$("#sprintBacklogs").empty().html("<li id='sprintBacklogMessage' class='alert alert-error'>No Sprint Selected</li>");
				$("#sprint-select").html("<option value='-1'>No Sprint Assigned</option>");
				$.get('${createLink(action : 'jsonFindSprintByTeamId', controller : 'sprint')}',{teamID : teamID},function(data) {
					
					if(data.sprints) {
						$("#sprint-select").empty().html("<option value='-1'>Select Sprint...</option>");;
						$.each(data.sprints, function(index, sprint) {
							$("#sprint-select").append("<option value='"+sprint.id+"'>"+sprint.sprintName+"</option>");
						});
					} else {
						$("#sprint-select").html("<option value='-1'>No Sprint Assigned</option>");
					}
				});
			}

			function checkSprintStatusById(sprintID)
			{
				$.get('${createLink(action : 'jsonFindSprintById', controller : 'sprint')}',{sprintID : sprintID},function(data) {
					if(data.sprint) {
						if(data.sprint.status == "Closed") 
						{
							disableProductBacklogsDragging();
							$("#sprintBacklogMessage").text("Sprint is closed");
						}
					}
					setupDraggable(); // (Re)Setup Draggable
				});
			}

			function ajaxGetIssueBySprint(sprintID) {
				resetProductBacklogStyle();
				if($("#sprint-select").val() != "-1") {
					$.get('${createLink(action : 'jsonFindIssueBySprint', controller : 'issue')}',{sprintID : sprintID},function(data) {
						if(data.issues) {
							$("#sprintBacklogs").empty();
							$.each(data.issues, function(index, issue) {
								$("#sprintBacklogs").append("<li data-issue='"+issue.id+"' class='userstory userstory-medium text-left'><div class='userstory-header'><strong>"+issue.subject+"</strong></div><div class='userstory-inner'>"+issue.description+"</div></div><div class='userstory-footer'><div class='pull-left'>V: 30 | Ri: 40 | R: D5T2</div><div class='pull-right'><a href='#' title='Edit' class='icon-pencil'></a> <a href='#' title='Remove' class='icon-remove'></a> <a href='#' title='Add Issue' class='icon-plus'></a></div></li>");
								$("#productBacklogs").find("li[data-userstory='"+issue.userStory.id+"']").fadeTo("slow","0.5").addClass("dontdragme");
							});
						} else {
							$("#sprintBacklogs").empty().html("<li id='sprintBacklogMessage' class='alert alert-error'>No Item</li>");
						}
						checkSprintStatusById(sprintID);
						setupDraggable(); // (Re)Setup Draggable
					});
				} else {
					$("#sprintBacklogs").empty().html("<li id='sprintBacklogMessage' class='alert alert-error'>No Sprint Selected</li>");
				}
			}

			function resetProductBacklogStyle()
			{
				$("#productBacklogs").find("li").fadeTo("fast","1").removeClass("dontdragme");
				setupDraggable();
			}

			function disableProductBacklogsDragging()
			{
				$("#productBacklogs li.userstory").addClass("dontdragme");
			}
			
			function setupDraggable() {
				$("#productBacklogs li.userstory").draggable("destroy"); // Destroy draggable function
				// Jquery UI processing
				$("#productBacklogs li.userstory:not(.dontdragme)").draggable({
					connectToSortable : '#sprintBacklogs',
					helper : "clone",
					revert : 'invalid',
					containment : '#page-container',
					drag : function(event, ui) {
						$(ui.helper).addClass("span4");
					}
				}).disableSelection();

				$("#sprintBacklogs").sortable({
					revert : true,
					items : " > .userstory",
					containment : '#page-container',
					beforeStop : function(event, ui) {
						if($("#sprint-select").val() == "-1") {
							$(ui.item).fadeOut(function() {
								$(this).remove();
							})
						}
					},
					receive : function(event, ui) {
						var sprintID = $("#sprint-select").val();
						if(sprintID != "-1") {
							var userStoryID = $(ui.sender).attr("data-userstory");
							$.post("${createLink(action : 'ajaxAddNewIssue', controller : 'issue')}",{sprintID : sprintID, userStoryID : userStoryID}, function(data) {
								if(data.issue) {
									$("#sprintBacklogs").find("#sprintBacklogMessage").remove();
									$("#productBacklogs").find("li[data-userstory='"+data.issue.userStory.id+"']").fadeTo("slow","0.5").addClass("dontdragme");
									setupDraggable(); // (Re)Setup Draggable
								}
							});
							
						}
					}
				}).disableSelection();
			}

			$("#project-select").change(function() {
				ajaxGetTeamByProject($(this).val());
				ajaxGetUserStoryByProject($(this).val());
			});

			$("#team-select").change(function() {
				ajaxGetSprintByTeam($(this).val());
			});

			$("#sprint-select").change(function() {
				ajaxGetIssueBySprint($(this).val());
			});
		});
	</script>
</body>
</html>
